<template>
  <BaseLayout breadcrumb>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="学科名称">
              <a-input v-model="queryParam.id" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="学科带头人">
              <a-input v-model="queryParam.status" placeholder="请输入" />
            </a-form-item>
          </a-col>

          <a-form-item label="操作时间">
            <a-date-picker
              v-model="queryParam.date"
              style="width: 100%"
              placeholder="请选择"
            />
          </a-form-item>
          <a-col :md="(!advanced && 8) || 24" :sm="24">
            <span
              class="table-page-search-submitButtons"
              :style="
                (advanced && {
                  float: 'right',
                  overflow: 'hidden',
                }) ||
                  {}
              "
            >
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button
                style="margin-left: 8px"
                @click="() => (queryParam = {})"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      :alert="options.alert"
      :rowSelection="options.rowSelection"
    >
      <span slot="serial" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">查看明细</a>
          <a-divider type="vertical" />
        </template>
      </span>
    </s-table>
  </BaseLayout>
</template>

<script>
import moment from 'moment';
import { STable } from '@/components';
import { getList } from '@/api/login';
import BaseLayout from '@/components/Container/index.jsx';
export default {
  name: 'TableList',
  components: {
    STable,
    BaseLayout,
  },
  data() {
    return {
      mdl: {},
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
        },
        {
          title: '医院名称',
          dataIndex: 'hosName',
        },
        {
          title: '学科名称',
          dataIndex: 'name',
        },
        {
          title: '学科带头人',
          dataIndex: 'perName',
        },
        {
          title: '学科类别',
          dataIndex: 'detail',
        },
        {
          title: '建表时间',
          dataIndex: 'time',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        console.log('loadData.parameter', parameter);
        return getList(Object.assign(parameter, this.queryParam)).then(
          (res) => {
            return res.result;
          }
        );
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        },
      },
    };
  },
  created() {
    this.tableOption();
  },
  methods: {
    handleSearch() {
      // $refs.table.refresh(true)
      console.log(this.queryParam);
    },
    tableOption() {
      this.options = {
        alert: false,
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        },
      };
    },
    handleOk() {},

    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      };
    },
  },
};
</script>
